<!--
 * @Author: gaoyu gy15354315043@163.com
 * @Date: 2024-10-15 15:15:56
 * @LastEditors: 郝奔 1425466221@qq.com
 * @LastEditTime: 2024-12-13 16:14:35
 * @Description: 九宫格
 * Copyright (c) 2024-present HBIS Digital Technology Co.,Ltd. All rights reserved. 
-->
<template>
    <div class="gridIcon">
        <el-icon class="grid" v-if="!isShowClose" @click="handleOpen">
            <Grid />
        </el-icon>
        <el-icon v-else class="close" @click="closeGrid">
            <Close />
        </el-icon>
    </div>
    <grid-drawer ref="GridDrawerRef" @changeIcon="isShowClose = false" />
</template>
<script lang="ts" setup>
import GridDrawer from './components/gird-drawer.vue'
const GridDrawerRef = ref()
const isShowClose = ref(false) //isShowClose控制图标展示，true：显示“关闭”按钮，false：显示“九宫格”按钮
/**
 * @description: 鼠标点击打开九宫格
 * @return {*}
 */
const handleOpen = (): void => {
    openGrid()
}
/**
 * @description: 鼠标悬浮到九宫格
 * @return {*}
 */
const openGrid = (): void => {
    if (!GridDrawerRef.value) return
    GridDrawerRef.value.initData()
    isShowClose.value = true
}
/**
 * @description: 关闭九宫格
 * @return {*}
 */
const closeGrid = (): void => {
    if (!GridDrawerRef.value) return
    GridDrawerRef.value.closeDrawer()
    isShowClose.value = false
}
provide('closeGrid', closeGrid);
</script>
<style scoped lang="scss">
.gridIcon {
    display: flex;
    align-items: center;

    .grid {
        color: #fff;
        margin-right: 20px;
        margin-left: 20px;
        font-size: 20px;
    }

    .close {
        color: #fff;
        background: #004FFF;
        width: 60px;
        height: 60px;
        margin-left: 0;
    }
}
</style>
